require("../style/cart.css");
var list = [
  {
    id: 625153951363,
    number: 15,
    buy_num: 1,
    select: true,
    name: "2020西太湖国际音乐节",
    showTime: "2020.09.19-09.20",
    price: "199",
    city: "常州",
    address: "常州西太湖中国花卉博览景区北门",
    pic: "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01zJEpaN2GdSG1Xvo8y_!!2251059038.jpg",
  },
  {
    id: 624506842658,
    number: 10,
    buy_num: 3,
    select: false,
    name: "2020舟山东海音乐节",
    showTime: "2020.09.04-09.06",
    price: "200",
    city: "舟山",
    address: "舟山市朱家尖南沙景区沙滩",
    pic: "https://img.alicdn.com/bao/uploaded/i4/2251059038/O1CN01L70FVl2GdSG2wpwyE_!!0-item_pic.jpg",
  },
  {
    id: 623216520608,
    number: 8,
    buy_num: 2,
    select: false,
    name: "中国•磐安 2020氧气山水音乐节",
    showTime: "2020.08.22 周六 16:30",
    price: "280",
    city: "金华",
    address: "金华磐安花溪风景区",
    pic: "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01ECp69h2GdSFpoUPAm_!!2251059038.jpg",
  },
  {
    id: 624345993344,
    number: 13,
    buy_num: 2,
    select: false,
    name: "2020“一生中最爱”七夕演唱会",
    showTime: "2020.08.25 周二 19:30",
    price: "180",
    city: "北京",
    address: "糖果TANGO-雍和宫店三层",
    pic: "https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01WGNYBE2GdSFqXJgII_!!0-item_pic.jpg",
  },
  {
    id: 624170605605,
    number: 5,
    buy_num: 1,
    select: true,
    name: "东海五渔节之敢潮音乐节",
    showTime: "2020.08.22 周六 18:00",
    price: "198",
    city: "舟山",
    address: "舟山嵊泗五龙乡听海广场(原黄沙村船厂)",
    pic: "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i1/2251059038/O1CN01eV5pR32GdSFxJUb0v_!!2251059038.jpg",
  },
];

// console.log(Number.MAX_SAFE_INTEGER);
//0.获取元素
let content = document.querySelector(".content");

//一般全大写来定义常量
// const MYAGE=18

// console.log(list);
//1.渲染页面
//1-1 准备一个函数
bindHTML();
function bindHTML() {
  //1-4 根据需求 需要计算一些东西
  let totalPrice = 0, //总价格
    totalNum = 0, //总数量
    selectNum = 0; //已经选择几个多选框
  list.forEach((item) => {
    //统计选中的数量/总价
    if (item.select === true) {
      totalPrice += item.price * item.buy_num;
      totalNum += item.buy_num;
      selectNum++;
    }

    // selectNum
  });

  //1-2 准备渲染
  //顶部的全选按钮
  //如果已选的数量>=原始数组的长度 全选就得选中
  let str = `
  <div class="top">
    <input type="checkbox" class="select_all" ${
      selectNum >= list.length ? "checked" : ""
    }> 全选
  </div>
  <ul class="center">`;

  //购物车列表
  //1-3 根据数组生成li
  list.forEach((item) => {
    //这里要用到id属性，data-id绑定自定义id属性，这样就可以知道我操作的是哪一个具体的商品
    str += ` 
    <li>
      <div class="select">
        <input data-id="${item.id}" type="checkbox" class="select_one" 
        ${item.select ? "checked" : ""} />
      </div>
      <div class="pic">
        <img src="${item.pic}" alt="" />
      </div>
      <div class="name">${item.name}</div>
      <div class="price">￥ <span>${(item.price - 0).toFixed(2)}</span></div>
      <div class="number">
        <button data-id="${item.id}" class="sub">-</button>
        <input type="text" value="${item.buy_num}" />
        <button data-id="${item.id}" class="add">+</button>
      </div>
      <div class="subtotal">￥ <span>${(item.price * item.buy_num).toFixed(
        2
      )}</span></div>
      <div class="del">
        <button data-id="${item.id}" class="del_btn">删除</button>
      </div>
  </li>`;
  });
  //购物车的尾部
  str += ` 
  </ul>
  <div class="bottom">
    <p>总购买数量: ${totalNum}</p>
    <p>
      <button data-price="${totalPrice.toFixed(2)}" class="pay">去结算</button>
      <button class="clear">清空购物车</button>
      <button class="clear_select">删除所有已选中</button>
      <button class="list">返回列表页</button>
    </p>
    <p>总价格 : ￥ <span>${totalPrice.toFixed(2)}</span></p>
  </div>`;
  //整个str准备完毕啦
  //把str放到content中
  content.innerHTML = str;
}

//2.绑定事件
content.addEventListener("click", (e) => {
  let target = e.target;
  //通过target来判断你点的是那个按钮

  //判断全选
  if (target.className === "select_all") {
    //1.拿到自己是true还是false
    //自己是什么？
    console.log(target.checked);
    let type = target.checked; //拿到自己是否选中
    list.forEach((item) => {
      //2.赋值
      item.select = type;
    });
    //3.重新渲染页面
    bindHTML();
  }
  //勾选单个
  //判断点击的是单个的商品按钮
  if (target.className === "select_one") {
    //1. 知道自己要修改的是数组中的那一条属性
    //在渲染的时候，已经把id这条属性 放上去了 data-id
    //如果你想让整个购物车结构联动,必须要修改list里面的数据然后重新渲染
    //该改那一条数据？
    //你点的 是  第一个 li   改数组里面的第一个数据
    let id = target.dataset.id - 0;
    // console.log(id);
    //找出来？
    let goods = list.find((item) => item.id === id);
    //2.取反
    goods.select = !goods.select;
    //3.重新渲染页面
    bindHTML();
  }
  //数量减少按钮
  if (target.className === "sub") {
    //1.拿到自己身上记录的id
    let id = target.dataset.id - 0;
    //2.找到指定的数据
    let goods = list.find((item) => item.id === id);
    //让购买数量—1
    //边界判断
    if (goods.buy_num <= 1) return;
    goods.buy_num--;
    //3.渲染页面
    bindHTML();
  }
  //加按钮
  if (target.className === "add") {
    //1.拿到自己身上记录的id
    let id = target.dataset.id - 0;
    //2.找到指定的数据
    let goods = list.find((item) => item.id === id);
    //让购买数量+1
    //边界判断  购买数量不能大于库存数量
    if (goods.buy_num >= goods.number) return;
    goods.buy_num++;
    //3.渲染页面
    bindHTML();
  }
  //删除
  //判断点击的是删除按钮
  if (target.className === "del_btn") {
    //1.拿到自己的id
    let id = target.dataset.id - 0;
    //2.从list数组中删除 id对应的那个对象
    //filter
    list = list.filter((item) => item.id !== id);
    //3.渲染页面
    bindHTML();
  }
  //去结算
  if (target.className === "pay") {
    //1.拿到总价
    let price = target.dataset.price - 0;
    //2.弹窗一下
    window.alert(`给我 ${price.toFixed(2)}元人民币`);
  }
  //判断点击的是清空购物车
  if (target.className === "clear") {
    //1.list置空
    list = [];
    //2.重新渲染
    bindHTML();
  }
  //判断点击的是返回商品列表
  if (target.className === "list") {
    window.location.href = "https://www.jd.com";
  }
  //删除选中
  if (target.className === "clear_select") {
    //把list里面 select属性 为true的删除
    // 把list里面 select属性 为false 的 留下来
    list = list.filter((item) => item.select === false);
    //渲染页面
    bindHTML();
  }
});
